<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
	th:replace="fragments/generic-frame::frame(~{fragments/menu::menu(6)},
	 ~{::th}, ~{::tr}, ~{::form}, ~{::script})">
<head></head>
<body>
	<th>课程名称</th>
	<th>学生名称</th>
	<th>开课老师名称</th>
	<th>课程分数</th>
	<th>操作</th>

	<tr th:each="cinfo : ${list}">
		<th:block th:with="sc=${cinfo.selectedCourse}">
			<td><input type="checkbox" id="check-all" class="flat"></td>
			<td th:text="${cinfo.course}">WEB</td>
			<td th:text="${cinfo.stu}">张三</td>
			<td th:text="${cinfo.teacher}">张恒锋</td>
			<td th:text="${sc.score}">70</td>
			
			<td><a th:attr="data-id=${sc.no}" href="#"
				class="btn-sm btn-info" data-toggle="modal"
				data-target="#edit-modal">录入成绩</a></td>
		</th:block>
	</tr>


	//录入学生成绩的弹窗
	<form id="modal-form" action="grade" method="post">
		<div class="form-group">
			<input type="hidden" name="course" class="form-control" id="no">
		</div>
		<div class="form-group">
			<label for="score" class="control-label">课程分数</label> <input
				type="text" name="score" class="form-control" id=score>
		</div>

	</form>

	<!-- 函数事件待修正 -->
	<script type="text/javascript">
		$(function() {
			/* 弹窗调用此处function */
			$('#edit-modal').on('show.bs.modal', function(e) {
				/* 弹窗对象 */
				var modal = $(e.currentTarget);
				var btn = $(e.relatedTarget);
				var tds = btn.closest('tr').find('td');

				/* 	eq里面的数字对应行数据 */
				modal.find('#no').val(btn.data('id'));
				modal.find('#score').val(tds.eq(4).text());

			});
		})
	</script>

</body>
</html>